<script setup lang='ts'>
	import {ref, computed, onMounted} from 'vue'
	import {useRoute, useRouter} from 'vue-router'
	import {
		NInput,
		useMessage,
	} from 'naive-ui'
	import {getCookie} from '@/utils/setCookie'
	import {NoticeInfo} from "@/store/modules/Popup/helper";
	import {useNoticeStore} from "@/store/modules/Popup";


	import {ModelType} from "@/typings/user";
	import {doPay} from "@/api/AliPay";
	import {AliPayType} from "@/typings/pay";


	const formRef = ref<any | null>(null)
	const message = useMessage()
	const model = ref<ModelType>(Object.create(null))
	const rules = {
		account: {
			required: true,
			message: '请输入用户名',
			trigger: ['input', 'blur'],
		},
		password: {
			required: true,
			message: '请输入密码',
			trigger: ['input', 'blur'],
		},
	}

	const route = useRoute()
	const router = useRouter()

	const noticeStore = useNoticeStore()
	const show = ref<boolean>(false)
	const { orderId } = route.params as { orderId: string }

	export interface NoticeState {
		noticeInfo: NoticeInfo
	}

	const noticeInfo = computed(() => noticeStore.noticeInfo)


	onMounted(() => {
		payToAli
	})

	async function payToAli(options: Partial<AliPayType>) {
	 let account = getCookie("blueCat_user_account")
		let res = await doPay({account:account,productId:"1317503462556848129"})
		if (res) {
			// const ck = encry(`lm${data.id}`)
			const div=document.createElement('divform');
			div.innerHTML=res;
			document.body.appendChild(div);
			document.forms[0].submit();
		}

	}

	function updateNoticeInfo(options: Partial<NoticeInfo>) {
		noticeStore.updateNoticeInfo(options)
	}


	const handleRegistBtnClick = async (e: MouseEvent) => {
		router.push('/regist')
	}

	type NInputThemeOverrides = NonNullable<NInput['themeOverrides']>
	const nInputThemeOverrides: NInputThemeOverrides = {
		textColor: 'black',
		borderColor: 'black',
		placeholderColor: '#979793',
		hoverColor: 'black',
		border: '1px solid black'
	}

</script>
<template>


	<div id="login-box">
		<body class="" monica-locale="zh_CN" monica-version="1.7.3" monica-id="ofpnmcalabcbjgholdjcjblkibolbppb">
		<div id="__next">
			<nav class="isolate bg-white">
				<div class="px-6 pt-6 lg:px-8">
					<nav class="flex items-center justify-between" aria-label="Global">
						<div class="flex lg:flex-1"><a class="-m-1.5 p-1.5" href="/"><span class="sr-only">BlueCat</span>

						</a></div>
					</nav>
					<div
						style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;display:none"></div>
				</div>
			</nav>
			<main id="skip">
				<section class="bg-white">
					<div class="max-w-6xl mx-auto py-8 sm:py-24 px-4 sm:px-6 lg:px-8">
						<div class="sm:flex sm:flex-col sm:align-center"><h1
							class="text-4xl font-extrabold text-black sm:text-center sm:text-6xl">Pricing Plans</h1>
							<p class="mt-6 text-center">Get 2 months for free by subscribing yearly!</p>
							<div class="relative self-center mt-2 bg-zinc-100 rounded-lg p-0.5 flex sm:mt-4 border border-zinc-200">
								<button type="button"
												class="relative w-1/2 bg-zinc-300 border-zinc-200 shadow-sm text-black rounded-md m-1 py-2 text-sm font-medium whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-opacity-50 focus:z-10 sm:w-auto sm:px-8">
									Monthly billing
								</button>
								<button type="button"
												class="ml-0.5 relative w-1/2 border border-transparent text-zinc-600 rounded-md m-1 py-2 text-sm font-medium whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-opacity-50 focus:z-10 sm:w-auto sm:px-8">
									Yearly billing
								</button>
							</div>
						</div>
						<div
							class="mt-12 space-y-4 sm:mt-16 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-6 lg:max-w-4xl lg:mx-auto xl:max-w-none xl:mx-0 xl:grid-cols-4">
							<div class="rounded-lg shadow-sm divide-y divide-zinc-400 bg-zinc-100 ">
								<div class="p-4 flex flex-col justify-between h-full">
									<div><h2 class="text-2xl leading-6 font-semibold text-black">Hobby</h2>
										<div class="py-4">
											<li class="flex space-x-2 mb-2">
												<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
														 aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-green-500">
													<path fill-rule="evenodd"
																d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
																clip-rule="evenodd"></path>
												</svg>
												<span class="text-sm font-semibold text-gray-700">2,000 message credits/month</span></li>
											<li class="flex space-x-2 mb-2">
												<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
														 aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-green-500">
													<path fill-rule="evenodd"
																d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
																clip-rule="evenodd"></path>
												</svg>
												<span class="text-sm font-semibold text-gray-700">5 chatbots</span></li>
											<li class="flex space-x-2 mb-2">
												<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
														 aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-green-500">
													<path fill-rule="evenodd"
																d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
																clip-rule="evenodd"></path>
												</svg>
												<span class="text-sm font-semibold text-gray-700">2,000,000 characters/chatbot</span></li>
											<li class="flex space-x-2 mb-2">
												<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
														 aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-green-500">
													<path fill-rule="evenodd"
																d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
																clip-rule="evenodd"></path>
												</svg>
												<span class="text-sm font-semibold text-gray-700">Embed on unlimited websites</span></li>
											<li class="flex space-x-2 mb-2">
												<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
														 aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-green-500">
													<path fill-rule="evenodd"
																d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
																clip-rule="evenodd"></path>
												</svg>
												<span class="text-sm font-semibold text-gray-700">Upload multiple files</span></li>
											<li class="flex space-x-2 mb-2">
												<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
														 aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-green-500">
													<path fill-rule="evenodd"
																d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
																clip-rule="evenodd"></path>
												</svg>
												<span class="text-sm font-semibold text-gray-700">API Access</span></li>
										</div>
									</div>
									<div><p class="mt-8"><span class="text-3xl font-bold white">$19</span><span
										class="text-base font-medium text-zinc-900">/month</span></p>
										<button data-variant="flat"
														class="Button_root__G_l9X mt-8 block w-full rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-zinc-100"
														style="background: black"
														@click="payToAli"
														type="button">Subscribe
										</button>
									</div>
								</div>
							</div>
							<div class="rounded-lg shadow-sm divide-y divide-zinc-400 bg-zinc-100 ">
								<div class="p-4 flex flex-col justify-between h-full">
									<div><h2 class="text-2xl leading-6 font-semibold text-black">Growth</h2>
										<div class="py-4">
											<li class="flex space-x-2 mb-2">
												<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
														 aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-green-500">
													<path fill-rule="evenodd"
																d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
																clip-rule="evenodd"></path>
												</svg>
												<span class="text-sm font-semibold text-gray-700">5,000 message credits/month</span></li>
											<li class="flex space-x-2 mb-2">
												<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
														 aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-green-500">
													<path fill-rule="evenodd"
																d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
																clip-rule="evenodd"></path>
												</svg>
												<span class="text-sm font-semibold text-gray-700">10 chatbots</span></li>
											<li class="flex space-x-2 mb-2">
												<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
														 aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-green-500">
													<path fill-rule="evenodd"
																d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
																clip-rule="evenodd"></path>
												</svg>
												<span class="text-sm font-semibold text-gray-700">4,000,000 characters/chatbot</span></li>
											<li class="flex space-x-2 mb-2">
												<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
														 aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-green-500">
													<path fill-rule="evenodd"
																d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
																clip-rule="evenodd"></path>
												</svg>
												<span class="text-sm font-semibold text-gray-700">Embed on unlimited websites</span></li>
											<li class="flex space-x-2 mb-2">
												<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
														 aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-green-500">
													<path fill-rule="evenodd"
																d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
																clip-rule="evenodd"></path>
												</svg>
												<span class="text-sm font-semibold text-gray-700">Upload multiple files</span></li>
											<li class="flex space-x-2 mb-2">
												<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
														 aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-green-500">
													<path fill-rule="evenodd"
																d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
																clip-rule="evenodd"></path>
												</svg>
												<span class="text-sm font-semibold text-gray-700">API Access</span></li>
										</div>
									</div>
									<div><p class="mt-8"><span class="text-3xl font-bold white">$49</span><span
										class="text-base font-medium text-zinc-900">/month</span></p>
										<button data-variant="flat"
														class="Button_root__G_l9X mt-8 block w-full rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-zinc-100"
														style="background: black"
														@click="payToAli"
														type="button">Subscribe
										</button>
									</div>
								</div>
							</div>
							<div class="rounded-lg shadow-sm divide-y divide-zinc-400 bg-zinc-100 ">
								<div class="p-4 flex flex-col justify-between h-full">
									<div><h2 class="text-2xl leading-6 font-semibold text-black">Standard</h2>
										<div class="py-4">
											<li class="flex space-x-2 mb-2">
												<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
														 aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-green-500">
													<path fill-rule="evenodd"
																d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
																clip-rule="evenodd"></path>
												</svg>
												<span class="text-sm font-semibold text-gray-700">10,000 message credits/month</span></li>
											<li class="flex space-x-2 mb-2">
												<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
														 aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-green-500">
													<path fill-rule="evenodd"
																d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
																clip-rule="evenodd"></path>
												</svg>
												<span class="text-sm font-semibold text-gray-700">20 chatbots</span></li>
											<li class="flex space-x-2 mb-2">
												<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
														 aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-green-500">
													<path fill-rule="evenodd"
																d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
																clip-rule="evenodd"></path>
												</svg>
												<span class="text-sm font-semibold text-gray-700">6,000,000 characters/chatbot</span></li>
											<li class="flex space-x-2 mb-2">
												<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
														 aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-green-500">
													<path fill-rule="evenodd"
																d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
																clip-rule="evenodd"></path>
												</svg>
												<span class="text-sm font-semibold text-gray-700">Embed on unlimited websites</span></li>
											<li class="flex space-x-2 mb-2">
												<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
														 aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-green-500">
													<path fill-rule="evenodd"
																d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
																clip-rule="evenodd"></path>
												</svg>
												<span class="text-sm font-semibold text-gray-700">Upload multiple files</span></li>
											<li class="flex space-x-2 mb-2">
												<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
														 aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-green-500">
													<path fill-rule="evenodd"
																d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
																clip-rule="evenodd"></path>
												</svg>
												<span class="text-sm font-semibold text-gray-700">API Access</span></li>
											<li class="flex space-x-2 mb-2">
												<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
														 aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-green-500">
													<path fill-rule="evenodd"
																d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
																clip-rule="evenodd"></path>
												</svg>
												<span class="text-sm font-semibold text-gray-700">Option to Choose GPT-4</span></li>
										</div>
									</div>
									<div><p class="mt-8"><span class="text-3xl font-bold white">$99</span><span
										class="text-base font-medium text-zinc-900">/month</span></p>
										<button data-variant="flat"
														class="Button_root__G_l9X mt-8 block w-full rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-zinc-100"
														style="background: black"
														@click="payToAli"
														type="button">Subscribe
										</button>
									</div>
								</div>
							</div>
							<div class="rounded-lg shadow-sm divide-y divide-zinc-400 bg-zinc-100 ">
								<div class="p-4 flex flex-col justify-between h-full">
									<div><h2 class="text-2xl leading-6 font-semibold text-black">Unlimited</h2>
										<div class="py-4">
											<li class="flex space-x-2 mb-2">
												<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
														 aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-green-500">
													<path fill-rule="evenodd"
																d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
																clip-rule="evenodd"></path>
												</svg>
												<span class="text-sm font-semibold text-gray-700">40,000 message credits/month included (Messages over the limit will use your OpenAI API Key)</span>
											</li>
											<li class="flex space-x-2 mb-2">
												<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
														 aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-green-500">
													<path fill-rule="evenodd"
																d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
																clip-rule="evenodd"></path>
												</svg>
												<span class="text-sm font-semibold text-gray-700">40 chatbots</span></li>
											<li class="flex space-x-2 mb-2">
												<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
														 aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-green-500">
													<path fill-rule="evenodd"
																d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
																clip-rule="evenodd"></path>
												</svg>
												<span class="text-sm font-semibold text-gray-700">11,000,000 characters/chatbot</span></li>
											<li class="flex space-x-2 mb-2">
												<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
														 aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-green-500">
													<path fill-rule="evenodd"
																d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
																clip-rule="evenodd"></path>
												</svg>
												<span class="text-sm font-semibold text-gray-700">Embed on unlimited websites</span></li>
											<li class="flex space-x-2 mb-2">
												<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
														 aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-green-500">
													<path fill-rule="evenodd"
																d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
																clip-rule="evenodd"></path>
												</svg>
												<span class="text-sm font-semibold text-gray-700">Upload multiple files</span></li>
											<li class="flex space-x-2 mb-2">
												<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
														 aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-green-500">
													<path fill-rule="evenodd"
																d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
																clip-rule="evenodd"></path>
												</svg>
												<span class="text-sm font-semibold text-gray-700">API Access</span></li>
											<li class="flex space-x-2 mb-2">
												<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
														 aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-green-500">
													<path fill-rule="evenodd"
																d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
																clip-rule="evenodd"></path>
												</svg>
												<span class="text-sm font-semibold text-gray-700">Option to Choose GPT-4</span></li>
											<li class="flex space-x-2 mb-2">
												<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
														 aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-green-500">
													<path fill-rule="evenodd"
																d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
																clip-rule="evenodd"></path>
												</svg>
												<span class="text-sm font-semibold text-gray-700">Remove 'Powered by Chatbase'</span></li>
										</div>
									</div>
									<div><p class="mt-8"><span class="text-3xl font-bold white">$399</span><span
										class="text-base font-medium text-zinc-900">/month</span></p>
										<button data-variant="flat"
														class="Button_root__G_l9X mt-8 block w-full rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-zinc-100"
														style="background: black"
														@click="payToAli"
														type="button">Subscribe
										</button>
									</div>
								</div>
							</div>
						</div>
						<div class="py-16"><h4 class="text-3xl font-extrabold text-black ">Pricing FAQs</h4>
							<ul role="list" class="mt-8 grid grid-cols-1 gap-8 lg:max-w-none lg:grid-cols-2">
								<li>
									<ul role="list" class="flex flex-col gap-y-8">
										<li><h3 class="font-display text-lg leading-7 text-slate-900">Is there a free plan?</h3>
											<p class="mt-4 text-slate-700">Yes, just by signing up you get 30 message credits and 1 chatbot.
												You can use these to test out chatbase and see if it works for you.</p></li>
										<li><h3 class="font-display text-lg leading-7 text-slate-900">How do message credits work?</h3>
											<p class="mt-4 text-slate-700">One AI response with gpt-3.5-turbo (the default) costs 1 message
												credit. One AI response with gpt-4 costs 20 message credits. You can change which model your
												chatbot uses in the chatbot settings. The difference is because gpt-4 costs 15x (prompt tokens)
												and 30x (completion tokens) what gpt-3.5-turbo costs on OpenAI.</p></li>
										<li><h3 class="font-display text-lg leading-7 text-slate-900">What counts as one chatbot?</h3>
											<p class="mt-4 text-slate-700">One chatbot means a chatbot that contains specific data and can
												answer any question about this data. Even if it was created using multiple documents.</p></li>
										<li><h3 class="font-display text-lg leading-7 text-slate-900">How many users can use my
											chatbot?</h3>
											<p class="mt-4 text-slate-700">If your chatbot is private, only you have access to it. If you
												decide to make it public, anyone with the link will be able to interact with it.</p></li>
										<li><h3 class="font-display text-lg leading-7 text-slate-900">When are my message credits
											renewed?</h3>
											<p class="mt-4 text-slate-700">Your message credits are renewed at the start of every calendar
												month regardless of when you subscribed. So if you subscribe on the 15th of March, your credits
												will be renewed on the 1st of April.</p></li>
									</ul>
								</li>
								<li>
									<ul role="list" class="flex flex-col gap-y-8">
										<li><h3 class="font-display text-lg leading-7 text-slate-900">How do I know how many characters are
											in my document?</h3>
											<p class="mt-4 text-slate-700">Once you attach your document(s) for upload, chatbase will show you
												the character count of all the attached documents.</p></li>
										<li><h3 class="font-display text-lg leading-7 text-slate-900">Can I upload multiple files to one
											chatbot?</h3>
											<p class="mt-4 text-slate-700">Yes, if you have a paid plan you can upload multiple files to one
												chatbot. Just click ctrl (windows) or cmd (mac) and select as many files as you want.</p></li>
										<li><h3 class="font-display text-lg leading-7 text-slate-900">How much data can I give one
											chatbot?</h3>
											<p class="mt-4 text-slate-700">Free plan: 400K Characters (~5MB) | Hobby: 2M Characters (~24MB) |
												Growth: 4M Characters (~50MB) | Standard: 6M Characters (~75MB) | Unlimited: 11M Characters
												(~140MB)</p></li>
										<li><h3 class="font-display text-lg leading-7 text-slate-900">How does the unlimted plan work?</h3>
											<p class="mt-4 text-slate-700">You get 40,000 message credits included in the plan when you
												subscribe. Every message after that will use your OpenAI API key that you can add in your
												account page. So you get the cheapest possible price per message after you hit the limit.</p>
										</li>
									</ul>
								</li>
							</ul>
						</div>
					</div>
				</section>
			</main>
		</div>
		</body>
	</div>

</template>



<style scoped>
	.cls-1 {
		fill: url(#radial-gradient-2);
	}

	.cls-1, .cls-2 {
		opacity: .32;
	}

	.cls-3 {
		fill: #fff;
	}

	.cls-4 {
		clip-path: url(#clippath-1);
	}

	.cls-5 {
		fill: none;
	}

	.cls-2 {
		fill: url(#radial-gradient);
	}


	#login-box {
		height: 100%;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;

	/*background: url('@/assets/back.webp') no-repeat fixed;*/
	@media screen and (min-width: 720px) and (max-width: 1920px) {
		background-size:

	100% 100%;
	}

	}
	.Button_root__G_l9X mt-8 block w-full rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-zinc-100{
		box-sizing: inherit;
		font-family: inherit;
		margin: 0;
		-webkit-appearance: button;
		background-image: none;
		margin-top: 2rem;
		width: 100%;
		font-size: .875rem;
		display: inline-flex;
		transform: none;
		cursor: pointer;
		align-items: center;
		justify-content: center;
		border-radius: .25rem;
		border-width: 1px;
		border-color: transparent;
		--tw-bg-opacity: 1;
		background-color: rgb(0 0 0/var(--tw-bg-opacity));
		padding: .5rem 1.25rem;
		text-align: center;
		font-weight: 600;
		text-transform: none;
		line-height: 1.5rem;
		--tw-text-opacity: 1;
		color: rgb(228 228 231/var(--tw-text-opacity));
		--tw-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
		--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
		box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
		transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;
		transition-duration: .15s;
		transition-timing-function: cubic-bezier(.4,0,.2,1);
	}
</style>
